
<template tag="以下文档内容为hycli自动生成">
  <el-dialog
    v-model="conf.visible"
    
    :title="title"
   :width="conf.width"
    draggable
      align-center="true" 
    :close-on-click-modal="false"
    :before-close="hide"
  >
  <el-form :model="form"  ref="form" :rules="rules_anu">
    <el-row>
    <el-col :span="12">
     <!--产品需求 下拉控件 -->
    <el-form-item prop="prod_id" label="产品需求" label-width="100px" label-position="right">
      <el-select   @change="onChange_prod_id(form.prod_id,'prod_requirement')" v-model="form.prod_id" style="width: 100%" filterable clearable
        placeholder="请选择产品需求" >
        <el-option v-for="item in prod_idList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="24">
    <!--标题 输入控件 -->
    <el-form-item prop="title" label="标题" label-width="100px" label-position="right">
      <el-input clearable style="width: 100%" v-model="form.title"  maxlength="128" 
      :rows="1"  type="textarea" show-word-limit 
        placeholder="请输入标题"  />
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <!--产生原因 多选控件 -->
    <el-form-item prop="cause" label="产生原因" label-width="100px" label-position="right">
      <el-select style="width: 100%"   v-model="form.cause" clearable multiple  collapse-tags 
      collapse-tags-tooltip
        placeholder="请选择产生原因">
        <el-option v-for="item in causeList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item prop="source" label="来源" label-width="100px" label-position="right">
      <el-radio-group v-model="form.source"   >
        <el-radio-button v-for="item in sourceList" :key="item.value" :label="item.value" >
            {{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
    </el-col>
    <el-col :span="24">
    <!--问题说明 输入控件 -->
    <el-form-item prop="description" label="问题说明" label-width="100px" label-position="right">
      <el-input clearable style="width: 100%" v-model="form.description"  maxlength="500" 
      :rows="5"  type="textarea" show-word-limit 
        placeholder="请输入问题说明"  />
    </el-form-item>
    </el-col>
    <el-col :span="24">
    <!--截图 文件控件 -->
    <el-form-item prop="image_urls" label="截图" label-width="100px" label-position="right">
      <el-input clearable style="width: 100%" v-model="form.image_urls"  maxlength="500" 
        :rows="1"   show-word-limit 
        placeholder="请输入截图地址或上传文件"  >
        <template #append>
          <el-upload multiple :show-file-list="false" :action="conf.uploadPath" :limit="100" :on-success="onUploadSuccess" >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </template>
      </el-input>
    </el-form-item>
    </el-col>
    <el-col :span="24">
    <!--解决方案 输入控件 -->
    <el-form-item prop="solution" label="解决方案" label-width="100px" label-position="right">
      <el-input clearable style="width: 100%" v-model="form.solution"  maxlength="500" 
      :rows="5"  type="textarea" show-word-limit 
        placeholder="请输入解决方案"  />
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <!--处理人 多选控件 -->
    <el-form-item prop="resolver" label="处理人" label-width="100px" label-position="right">
      <el-select style="width: 100%"   v-model="form.resolver" clearable multiple  collapse-tags 
      collapse-tags-tooltip
        placeholder="请选择处理人">
        <el-option v-for="item in resolverList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item prop="status" label="状态" label-width="100px" label-position="right">
      <el-radio-group v-model="form.status"   >
        <el-radio-button v-for="item in statusList" :key="item.value" :label="item.value" >
            {{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item prop="is_verified" label="已验证" label-width="100px" label-position="right">
      <el-radio-group v-model="form.is_verified"   >
        <el-radio-button v-for="item in is_verifiedList" :key="item.value" :label="item.value" >
            {{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item prop="is_published" label="已发布" label-width="100px" label-position="right">
      <el-radio-group v-model="form.is_published"   >
        <el-radio-button v-for="item in is_publishedList" :key="item.value" :label="item.value" >
            {{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
    </el-col>
    </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hide" icon="close">取消</el-button>
        <el-button type="primary" @click="save" icon="select">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import rtext from "@/views/cmpnts/rtext.vue"
export default {
  components: {
    rtext
},
  data() {
    return {
      conf: {
        title:"添加问题收集",
        visible: false,
        width:"60%",
        uploadPath:this.$theia.env.join("/file/upload"),
      },
rules_anu:{
    prod_id:[{required:false,message:"请输入产品需求",trigger: 'blur'}],
    title:[{required:true,message:"请输入标题",trigger: 'blur'}],
    cause:[{required:true,message:"请输入产生原因",trigger: 'blur'}],
    source:[{required:true,message:"请输入来源",trigger: 'blur'}],
    description:[{required:true,message:"请输入问题说明",trigger: 'blur'}],
    image_urls:[{required:false,message:"请输入截图",trigger: 'blur'}],
    solution:[{required:false,message:"请输入解决方案",trigger: 'blur'}],
    resolver:[{required:false,message:"请输入处理人",trigger: 'blur'}],
    status:[{required:true,message:"请输入状态",trigger: 'blur'}],
    is_verified:[{required:true,message:"请输入已验证",trigger: 'blur'}],
    is_published:[{required:true,message:"请输入已发布",trigger: 'blur'}],
  },
    form:{
        prod_id:"",
        title:"",
        cause:[],
        source:"",
        description:"",
        image_urls:"",
        solution:"",
        resolver:[],
        status:"",
        is_verified:"",
        is_published:"",
    },
    prod_idList:[],
    causeList:[],
    sourceList:[],
    resolverList:[],
    statusList:[],
    is_verifiedList:[],
    is_publishedList:[],
    }
  },
  methods: {
    show(fm = {}) {
      this.title = fm.$title || this.title
      this.conf.visible = true;
      this.loadEnums_anu()
      let local = {}
      let cache = Object.assign(local,fm)
      this.form = Object.assign(cache,this.$route.params)
      this.onChange_prod_id(this.$route.params["prod_id"]||this.form["prod_id"],"prod_requirement")
    },
    save(){
      this.$refs.form.validate((v=>{
          if(v) this.onSave()
      }))
    },
    onSave(){
        let that = this
        let postForm = Object.assign({},this.form)
        postForm.cause = (postForm.cause||[]).join(",")
        postForm.resolver = (postForm.resolver||[]).join(",")
        postForm.lob_id = this.$theia.user.get("lob_id")
        //保存数据
        this.$theia.http.post("/ws/bug/collection",postForm).then(res=>{
            that.$notify.success({title: '成功',message: '问题收集保存成功',duration:5000})
            that.hide()
            that.$theia.enum.clear("")
            that.$emit("onsaved")
        }).catch(res=>{
            let code = ((res||{}).response||{}).status||0
            let msg= `问题收集保存失败(${code})`
            msg = code == 909? msg+"数据重复，请修改后重试":msg
            that.$notify.error({title: '失败',message:msg,duration:5000})
        })
    },
    hide() {
      this.conf.visible = false;
      this.$refs.form.resetFields();
    },
    onUploadSuccess(response){
      this.form.image_urls = response.path
    },
    onChange_prod_id(val,tp){
      //添加联动
      let that = this
      if(tp){
        let lst= this.$theia.enum.get(tp)
        var hasValues = {}
        lst.forEach(el => {
          if(el.value == val)
          if (!that.form.name || that.form._name == that.form.name) {
            hasValues.name = true
            that.form.name = el.name
            that.form._name = el.name
          }
        });
        if(!hasValues.name){
          that.form.name = ""
          that.form._name = ""
        }
      }
    },
    loadEnums_anu(){
        //产品需求
        this.prod_idList = this.$theia.enum.get("prod_requirement","",this.$theia.user.get("lob_id"),false,"")
        //产生原因
        this.causeList = this.$theia.enum.get("bug_cause","","" ,false,"")
        //来源
        this.sourceList = this.$theia.enum.get("bug_source","","" ,false,"")
        //处理人
        this.resolverList = this.$theia.enum.get("staff_info","",this.$theia.user.get("lob_id"),false,"")
        //状态
        this.statusList = this.$theia.enum.get("bug_status","","" ,false,"")
        //已验证
        this.is_verifiedList = this.$theia.enum.get("bool","","" ,false,"")
        //已发布
        this.is_publishedList = this.$theia.enum.get("bool","","" ,false,"")
    },

},
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.form_item_info{
  margin-left: 4px;
  color:#999;
}
.form_item_info:hover{
  cursor: pointer;
  font-weight: 500;
  color:#333;
}
</style>